<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字符串</title>
</head>
<body>
    <h1>字符串</h1>

    <script>
        // 字符串使用单引号
        // bad
        const name = "张三";

        // good
        const name = '张三';

        // 字符串模板
        // bad
        const message1 = '你好, ' + name + '!';

        // good
        const message2 = `你好, ${name}!`;

        // 多行字符串
        // bad
        const multiLine1 = '第一行\n' +
            '第二行\n' +
            '第三行';

        // good
        const multiLine2 = `
            第一行
            第二行
            第三行
        `;

        // 实际应用示例
        const user = {
            name: '李四',
            age: 20,
            city: '北京'
        };

        // 模板字符串的使用
        const userInfo = `
            用户信息：
            姓名：${user.name}
            年龄：${user.age}
            城市：${user.city}
        `;
        console.log(userInfo);

        // HTML模板
        const data = {
            title: '标题',
            content: '内容',
            footer: '页脚'
        };

        const template = `
            <div class="container">
                <h1>${data.title}</h1>
                <div class="content">
                    ${data.content}
                </div>
                <footer>
                    ${data.footer}
                </footer>
            </div>
        `;

        // SQL查询模板
        const table = 'users';
        const conditions = {
            age: 18,
            city: '北京'
        };

        const query = `
            SELECT * FROM ${table}
            WHERE age > ${conditions.age}
            AND city = '${conditions.city}'
        `;
    </script>
</body>
</html> 